<template>
  <div v-loading="loading">
    <el-dialog title="详情" :visible.sync="dialogVisible" width="700px">
      <el-form ref="form" :model="form" label-width="120px" size="mini">
        <el-row>
          <el-col :span="24">
            <el-form-item label="题目名称：">{{ form.label }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="题目类型：">{{
              form.type | typeFilter
            }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="题目条件：">{{
              form.conditions
            }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="产品类型：">{{ form.matchType }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="是否必填：">{{
              form.must == 1 ? "必填" : "选填"
            }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="是否主问题：">{{
              form.firstShow ? "是" : "否"
            }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="创建人：">{{ form.createBy }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="排序：">{{ form.sort }}</el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.note">
          <el-col :span="24">
            <el-form-item label="备注：">{{ form.note }}</el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="form.type == 2 || form.type == 3">
          <el-col :span="24">
            <el-form-item label="选项：">
              <el-table
                size="mini"
                :data="form.options"
                border
                style="width: 560px"
                max-height="300"
                min-height="100"
              >
                <el-table-column align="center" label="序号" width="50">
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="label"
                  label="提干"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="value"
                  label="选项值"
                ></el-table-column>
                <el-table-column align="center" label="关联子问题">
                  <template slot-scope="scope">
                    {{
                      scope.row.nextQuestionLabel
                        ? scope.row.nextQuestionLabel
                        : "无"
                    }}
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getMatchingQuestionDetail } from "@/api/product";
import { getDictLabel } from "@/utils/dict";
export default {
  name: "questionDetail",
  props: {
    matchTypeList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  filters: {
    typeFilter(type) {
      const mapObj = {
        1: "填空",
        2: "单选题",
        3: "多选题"
      };
      return mapObj[type];
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      form: {}
    };
  },
  created() {},
  methods: {
    openDetail(v) {
      this.dialogVisible = true;
      this.getDetail(v);
    },
    getDetail(v) {
      this.loading = true;
      getMatchingQuestionDetail(v.id)
        .then(res => {
          res.data.matchType = getDictLabel(
            res.data.matchType,
            this.matchTypeList
          ).join(",");
          this.form = res.data;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    }
  },
  mounted() {}
};
</script>

<style scoped lang="scss">
/deep/ .el-dialog__body {
  padding: 0;
}
</style>
